<?php use_helper('My');?>
<h1>This is module1</h1>

<div class="jscode-button">
	<ul class="ui-widget ui-helper-clearfix" id="icons">
		<li title="Add an image" class="ui-state-default ui-corner-all" id="view-icon">
			<span class="ui-icon ui-icon-circle-plus"></span>
		</li>
	</ul>
	&nbsp;
</div>
<div id="jscode" class="jscode" style="display: none;">
	<textarea></textarea>
	<button class="execode">Execute</button> 
</div>

<div id="winVP" style="position: relative; height: 660px; border: #cecece 1px solid; margin: 10px;">

  <div id="elem-cltr" class="elem-cltr" style="display: none;">
	<ul class="ui-widget ui-helper-clearfix" id="icons">
		<li title="Add an image" class="ui-state-default ui-corner-all" id="view-icon">
			<span class="ui-icon ui-icon-close"></span>
		</li>
	</ul>
  </div>

</div>

<div id="general-elements" style="overflow:visible;">
	
	<div class="element-list" type="basic">HTML</div>
	<div class="element-list" type="text">Text</div>
	<div class="element-list">Message</div>
	
</div>

<div id="img-elements">
	
	<div class="img-icon" style="display: none;">
		<img title="" src="">
		<span></span>
	</div>
	
	<ul class="ui-widget ui-helper-clearfix add-image-button" id="icons">
		<li title="Add an image" class="ui-state-default ui-corner-all" id="view-icon">
			<span class="ui-icon ui-icon-circle-plus"></span>
		</li>
	</ul>
</div>

<!-- Upload picture form -->
<form id="Form1" name="Form1" method="post" action="" style="">
    <input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_size; ?>" />
    Select an image from your hard disk:

    <div>
        <input type="file" name="fileToUpload" id="fileToUpload" size="18" style="" />
        <input type="Submit" value="Submit" id="buttonForm" />
    </div>
</form>
<!-- End form -->

<img id="loading" src="/images/loading.gif" style="display:none;" />

<p id="message">

<script type="text/javascript" src="/js/upload.js">
</script>

<div id="attributes" >
</div>

<!-- General attributes -->
<div id="general-attributes">
	<!-- Table attribute -->
	<table width="100%" cellspacing="0" cellpadding="4" elementId="card">
	
		<tr height="40px">
			<td class="attr-name" width="50%">Background-image</td>
			<td class="attr-value background-image"></td>
		</tr>
		
		<tr id="css_key_value" style="display: none;">
			<td class="attr-name editable" width="50%">Css Attribute<img class="delete-attribute-button" alt="" src="/images/close_button.gif"></td>
			<td class="attr-value editable">Value</td>
		</tr>
		
		<tr id="option-pattern" class="option-value" style="display: none;">
			<td class="option" width="50%">option<img class="delete-option-button" alt="" src="/images/close_button.gif"></td>
			<td class="">value</td>
		</tr>
	</table>
	
	<!-- Add attribute button -->
	<ul class="ui-widget ui-helper-clearfix add-attribute-button" id="icons">
		<li title="Add an Attribute" class="ui-state-default ui-corner-all" id="view-icon">
			<span class="ui-icon ui-icon-circle-plus"></span>
		</li>
	</ul>
</div>

<!-- Element Attributes -->
<div id="element-attributes">

	<!-- Add attribute button -->
	<ul class="ui-widget ui-helper-clearfix add-attribute-button" id="icons" style="display: none;">
		<li title="Add an Attribute" class="ui-state-default ui-corner-all" id="view-icon">
			<span class="ui-icon ui-icon-circle-plus"></span>
		</li>
	</ul>
	<ul class="ui-widget ui-helper-clearfix import-attribute-button" id="icons" style="display: none;">
		<li title="Import Css template" class="ui-state-default ui-corner-all" id="view-icon">
			<span class="ui-icon ui-icon-arrowreturnthick-1-s"></span>
		</li>
	</ul>
</div>

<div id="general-animations">

	<div id="animation-pattern" class="animation" style="display: none;">
		<div class="element-id">
			<span class="elem-id"></span>
			<img class="delete-animation-button" alt="" src="/images/close_button.gif">
		</div>
		<div class="animation-name">
			<ul class="ui-widget ui-helper-clearfix remove-animation-option" id="icons" style="">
				<li title="Remove option" class="ui-state-default ui-corner-all" id="view-icon">
					<span class="ui-icon ui-icon-circle-minus"></span>
				</li>
			</ul>
			<span class="name">animate</span>
			<ul class="ui-widget ui-helper-clearfix add-animation-option" id="icons" style="">
				<li title="Add more option" class="ui-state-default ui-corner-all" id="view-icon">
					<span class="ui-icon ui-icon-circle-plus"></span>
				</li>
			</ul>
		</div>
		
		<table class="options" width="100%" cellspacing="0" cellpadding="4">
		</table>
		<hr>
	</div>

	<!-- Add animation buttons -->
	<ul class="ui-widget ui-helper-clearfix add-animation-button" id="icons" style="">
		<li title="Add more animation" class="ui-state-default ui-corner-all" id="view-icon">
			<span class="ui-icon ui-icon-circle-plus"></span>
		</li>
	</ul>
	<ul class="ui-widget ui-helper-clearfix play-animation" id="icons" style="">
		<li title="Play animations" class="ui-state-default ui-corner-all" id="view-icon">
			<span class="ui-icon ui-icon-play"></span>
		</li>
	</ul>
</div>

<div id="card" >
</div>

<style>
 label, input.text { display:block; }
 input.text { margin-bottom:12px; width:95%; padding: .4em; }
 fieldset { padding:0; border:0; margin-top:25px; }
 .ui-dialog .ui-state-error { padding: .3em; }
 .validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>

<div id="dialog-form" title="Create new HTML">

	<form>
	<fieldset>
		<label for="name">Tag Name</label>
		<input type="text" name="tag_name" id="input_tag_name" class="text ui-widget-content ui-corner-all" />
		<label for="content">Content</label>
		<input type="text" name="content" id="input_content" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div>

<div id="import-css-form" title="Import Css template">
	<form>
	<fieldset>
		<select id="css-template">
			<option value=""></option>
		</select>
	</fieldset>
	</form>
</div>


<?php echo list_img_files("");?>

<script type="text/javascript" src="/js/init.js">
</script>

<script type="text/javascript" src="/js/basic_htmle.js">
</script>

<script type="text/javascript" src="/js/advanced_elements.js">
</script>

<script type="text/javascript" src="/js/elements.js">
</script>

<script type="text/javascript" src="/js/animations.js">
</script>

<script type="text/javascript" src="/js/XmlParser.js">
</script>